<template>
  <q-page :padding="!$q.platform.is.mobile">
    <q-inner-loading visible v-if="loading">
      <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
      <b class="text-primary">数据加载中...</b>
    </q-inner-loading> 

    <div v-if="!loading&&list.length==0" class="q-pa-lg">暂无任何发送记录</div>

    <q-infinite-scroll :handler="loadList" ref="scroll">
      <!-- list -->
      <q-list separator sparse :no-border="$q.platform.is.mobile" v-if="list.length>0">
        <q-item v-for="item in list" :key="'notice_'+item.noticeId"
            :to="'/doumail-code/view/' + item.noticeId"
            class="relative-position">
          <q-item-main>
            <q-item-tile label><q-icon name="mdi-movie"/> 《{{item.title}}》</q-item-tile>
            <q-item-tile sublabel><q-icon name="mdi-calendar-clock"/> {{item.updateTime}}</q-item-tile>
          </q-item-main>
          <q-item-side right>共 <b>{{item.userCount}}</b> 人</q-item-side>
          <q-item-side right icon="mdi-chevron-right" />
          <q-chip floating class="text-right">
            <div v-if="item.status==0"><small><b class="text-primary">未发送</b></small></div>
            <div v-if="item.status==9"><small><b class="text-blue">发送中</b></small></div>
            <div v-if="item.status==1"><small><b class="text-green">已发送</b></small></div>
            <div v-if="item.status<0"><small><b class="text-red">未完成</b></small></div>
          </q-chip>
        </q-item>

        <q-spinner-gears slot="message" :size="30" color="primary" />
      </q-list>
    </q-infinite-scroll>

    <!-- create new -->
    <q-btn round color="primary" class="fixed" icon="add" size="lg"
      style="right: 15px; bottom: 15px" @click="$router.push('/doumail-code/edit/0')"/>

  </q-page>
</template>

<script>
export default {
  name: 'PageDoumailCode',
  data() {
    return {
      loading: true,
      limit: 20,
      next: 0,
      list:[]
    }
  },
  mounted() {
    this.$api.ui.pageTitle = '票码豆油管理';    
    this.$refs.scroll.loadMore();
  },
  methods: {
    loadList(page, done) {
      let me = this;
      this.$api.notice.loadList('MAIL_CODE', me.limit*(page-1), me.limit, res=>{
        me.loading = false;
        let data = res.data;
        data.model.forEach(item=>{
          me.list.push(item);
        });
        done(data.model.length < me.limit);
      });
    }
  }
}
</script>

